<template>
  <v-select
    :label="label"
    chips
    tags
    :prepend-icon="prependIcon"
    :hint="hint"
    :rules="rules"
    :required="required"
    clearable
    v-model="insideChips"
  >
    <template slot="selection" slot-scope="data">
      <v-chip
        close
        @input="remove(data.item)"
        :selected="data.selected"
      >
        <strong>{{ data.item }}</strong>
      </v-chip>
    </template>
  </v-select>
</template>

<script>
  export default {
    props: {
      chips: Array,
      label: String,
      prependIcon: String,
      hint: String,
      rules: Array,
      required: Boolean
    },
    data: () => ({
      insideChips: this.chips
    }),
    watch: {
      chips(val) {
        this.insideChips = val
      },
      insideChips(val) {
        this.$emit('update:chips', val)
      }
    },
    methods: {
      remove(item) {
        this.insideChips.splice(this.insideChips.indexOf(item), 1)
        this.insideChips = [...this.insideChips]
      }
    }
  }
</script>
